<template>
  <div class="home">
    <div class="top-title">
      <div class="top-title-text">首页</div>
    </div>

    <div class="today-navs">today's 推荐</div>

    <div class="text">
      <van-pull-refresh
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
      >
        <template #pulling="props">
          <img
            class="doge"
            src="https://img01.yzcdn.cn/vant/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>

        <!-- 释放提示 -->
        <template #loosing>
          <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" />
        </template>

        <!-- 加载提示 -->
        <template #loading>
          <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg" />
        </template>
        <HomeNavView
          v-for="item in textArr"
          :key="item.objectId"
          :img="item.topImage"
          :title="item.title"
          :body="item.body"
          :objectId='item.objectId'
        />
        <wd-infinite-load
          ref="loadmore"
          @loadmore="loadmore"
          :loading="loading"
        >
        <wd-loading class="loading-black" size="50px" color="#3EAD3E"></wd-loading>
        </wd-infinite-load>
      </van-pull-refresh>
    </div>
  </div>
</template>


<script>
import HomeNavView from "./HomeNavView.vue";
import { debounce } from "lodash-es";

export default {
  name: "HomeView",
  data() {
    return {
      textArr: [],
      skip: Math.floor(Math.random() * 1684),
      isLoading: false,
      loading: false,
      list: [],
      isExit: [],
      time: 99,
      isTrue: false,
    };
  },
  // created() {
  //   this.getData(this.textArr);
  // },
  created() {
    this.getData = debounce(this.getData);
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios
        .get(
          `http://cloud.agopage.com/6b83fd3bc06260ec/topPage?skip=${this.skip}&version=1.3.0`
        )
        .then(({ data }) => {
          this.textArr = [...data.agopages];
        });
    },
    scrollData() {
      this.$axios
        .get(
          `http://cloud.agopage.com/6b83fd3bc06260ec/topPage?skip=${this.skip}&version=1.3.0`
        )
        .then(({ data }) => {
          this.list = [...data.agopages];
        });
    },
    isExitData() {
      while (this.isTrue == false) {
        this.skip = Math.floor(Math.random() * 1684);
        if (this.isExit.indexOf(this.skip) === -1) {
          this.isExit.push(this.skip)
          this.isTrue = true
        }
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.isExit = [];
        this.textArr = [];
        this.isLoading = false;
        this.isExitData();
        this.isTrue = false;
        this.getData();
      }, 1000);
    },
    loadmore() {
      this.loading = true;
      if (this.time) {
        setTimeout(() => {
          this.isExitData();
          this.isTrue = false;
          this.scrollData();
          this.textArr = [...this.textArr, ...this.list];
          this.loading = false;
          this.time--;
        }, 1000);
      } else {
        this.$refs.loadmore.loadEnd();
      }
    },
  },
  components: {
    HomeNavView,
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(242, 238, 238, 0.742);
}

.top-title {
  width: 100vw;
  height: 45px;

  .top-title-text {
    border-bottom: 3px solid rgba(62, 173, 62, 0.731);
    margin-left: 30px;
    width: 20vw;
    height: 100%;
    text-align: center;
    line-height: 45px;
    font-size: 23px;
    color: rgba(62, 173, 62, 0.731);
  }
}

.today-navs {
  margin-left: 20px;
  width: 50vw;
  height: 75px;
  line-height: 75px;
  font-weight: 600;
  font-size: 25px;
}

.text {
  width: 100vw;
}

.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}

.loading-black {
  padding-left: 40%;
  border-radius: 4px;
}
</style>
